<template>
	<view class="content">
		<!-- 顶部导航栏组件 -->
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="#2F75FA"></QSNavbar>
		<!-- 气泡背景图 -->
		<view class="bubble-back">
			<u--image :src="bubbleBackgroundImage" width="100%" :showMenuByLongpress="false" mode="widthFix">
			</u--image>
			<view class="text-info">
				<u--text text="绑定手机号码" size="20" :bold="true"></u--text>
				<!-- <u--text text="信息将于当前微信绑定(用于身份验证)" size="16"></u--text> -->
			</view>
			<view class="getPhoneNumber">
				<!-- <button  open-type="getUserInfo" @getuserinfo="getUser">
				
								登录/注册
						</button>
						  <button class="login-btn" type="primary" @click="getUserInfo">
						        微信用户一键登录
						      </button>
							  <button class="btn" open-type="getUserInfo" @click="bindGetUserInfo">授权登录</button> -->

				<!-- <button class="btn" open-type="getUserInfo" @click="bindGetUserInfo">授权登录</button> -->
				<u-button type="primary" text="获取手机号" open-type="getPhoneNumber"
					@getphonenumber="onGetPhoneNumber"></u-button>
			</view>
			<!-- 最新登录头像昵称 -->
			<!-- <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image :src="avatarUrls" mode="" style="width: 40rpx;height: 40rpx;"></image>
			</button> 
			<input type="nickname" class="weui-input" placeholder="请输入昵称"/> -->
			<!-- <view class="" style="width: 200rpx; height: 1000rpx;">
				 <u-tooltip text="下方显示" direction="bottom"></u-tooltip>
				{{popo}}
			
			</view> -->
			<!-- <u--textarea v-model="value1" placeholder="请输入内容" ></u--textarea> -->
		</view>
	</view>
</template>

<script>
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	const index = require('@/api/personal/index.js')
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				bubbleBackgroundImage: this.$https.assetsPath + '3a2d36f8b226f37603f756fef62f2b91c8091ef8.png',
				encryptedData: '',
				iv: "",
				codes: '',
				popo: "",
				value1: '',
				avatarUrls: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/75345690b19185b928428b228453948fbce293ba.png'
			};
		},
		onLoad(options) {
			let that = this
			// that.initData()
			that.navbarItems_1[1].text = options.applet_name
			wx.login({
				success(res) {
					// if (res.code) {
					that.codes = res.code
					console.log(that.codes, '2222')
					// }
				}
			})
		},
		methods: {
			onChooseAvatar(e) {
				console.log(e, '12132132')
				this.avatarUrls = e.detail.avatarUrl
			},
			// 数据初始化
			// async initData() {
			// 	// 获取页面设置配置
			// 	const _this = this;
			// 	// 获取学员资料
			// 		let params = {
			// 			app_id: this.$https.weixinAppId,
			// 		}
			// 		let res = await index.getProjectIdByAppId(params)
			// 		if (res.code == 1) {
			// 		}


			// },
			// getUser(e) {
			// 	console.log(e, '5685698569')
			// 	// 获取用户信息
			// 	uni.getUserInfo({
			// 	  provider: 'weixin',
			// 	  success: function (infoRes) {
			// 	    console.log('用户昵称为：' + infoRes.userInfo);
			// 	  }
			// 	});
			// },
			// getUserInfo() {
			//      uni.getUserInfo({
			//        provider: 'weixin',
			//        success: (res) => {
			// 		 uni.login({
			// 		   provider: 'weixin', //使用微信登录
			// 		   success: function (loginRes) {
			// 		   }
			// 		 });
			//        },
			//      });
			//    },
			bindGetUserInfo() {
				uni.getUserProfile({
					desc: '用于完善资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res1) => {
						this.iv = res1.iv
						this.encryptedData = res1.encryptedData
						// if (!res1.encryptedData || !res1.iv) return false;
						// this.getOpenIdAndSessionKey({
						//   appid: 'wxa3ab0b1d7acd86fd',
						//   code: this.code,
						//   callback: (res2) => {
						//     if (res2.data) this.transmitData(
						//       res2.data.openid,
						//       res1.iv,
						//       res1.encryptedData,
						//       res2.data.session_key,
						//       'wxa3ab0b1d7acd86fd',
						//     )
						//   }
						// })
					},
					fail: (res) => {
						uni.showToast({
							icon: "none",
							title: '用户拒绝获取'
						})
					}
				})

			},
			onGetPhoneNumber(e) {
				console.log(e, '456')
				let that = this
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权
					//拒绝授权后弹出一些提示
				} else { //允许授权
					// wx.login({
					// 	success(res) {
					// 		if (res.code) {
					// 			console.log(res, '123')
					// 			that.codes = res.code
					// 			//发起网络请求
					// 			let params = {
					// 				appid: that.$https.weixinAppId,
					// 				encryptedData: e.detail.encryptedData,
					// 				iv: e.detail.iv,
					// 				code: res.code,
					// 				project_id: getApp().globalData.projectId,
					// 				references: uni.getStorageSync("openidlist")
					// 			}
					// 			that.appletPhoneLogin(params)
					// 		}
					// 	}
					// })
					let params = {
						appid: that.$https.weixinAppId,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						code: that.codes,
						project_id: getApp().globalData.projectId,
						references: uni.getStorageSync("openidlist"),
						invite_code: uni.getStorageSync("codescene") //二维码用户openid
					}
					that.appletPhoneLogin(params)
				}
			},
			async appletPhoneLogin(params) {
				let that = this
				let data = params
				let result = await index.appletPhoneLogin(data)
				if (result.code == 1) {
					uni.setStorageSync('phone', result.data.phone)
					uni.setStorageSync('openid', result.data.openid)
					uni.setStorageSync('token', result.data.authorization_token)
					uni.removeStorage({
						key: 'openidlist',
						success: function(res) {}
					});
					uni.showLoading({
						success(res) {
							if (res.errMsg == 'showLoading:ok') {
								uni.hideLoading()
								uni.reLaunch({
									url: '/pages/personal/personal'
								})
							}
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '授权失败，请稍后再试'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
	}

	.bubble-back {
		width: 100%;
		height: 400rpx;
		position: relative;
	}

	.text-info {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}

	.getPhoneNumber {
		width: 700rpx;
		display: block;
		margin: auto;
	}

	.avatar-wrapper {
		border: none !important;
		background-color: #fff !important;
	}
</style>